<template>
    <div class="box">
        <button @click="ins">-</button>
        <input type="text" :value="num" />
        <button @click="add">+</button>
    </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  props: {
    min: {
      type: String
    },
    max: {
      type: String
    },
    modelValue: {
      type: String
    }
  },
  setup (props, { emit }) {
    const num = ref(props.modelValue)
    watch(() => {
      return props.modelValue
    }, () => {
      num.value = props.modelValue
    })
    function ins () {
      if (num.value === props.min) return
      num.value--
      emit('update:modelValue', num.value)
    }
    function add () {
      if (num.value === props.max) return
      num.value++
      emit('update:modelValue', num.value)
    }
    return {
      add, ins, num
    }
  }
}
</script>
<style>
.box {
    margin: 100px 100px;
}
</style>
